<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>css圆角方法测试</title>
    <script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
    
    <style type="text/css">
        table span{ display:block;}
    
        .boxy-border-vertical1, .boxy-border-vertical2, .boxy-border-vertical3, .boxy-border-vertical4, .boxy-border-vertical5
        {
            display: block;
            overflow: hidden;
        }
        .boxy-border-vertical1, .boxy-border-vertical2, .boxy-border-vertical3
        {
            height: 1px;
        }
        
        .boxy-border-vertical1
        {
            margin: 0 5px;
        }
        .boxy-border-vertical2
        {
            margin: 0 3px;
            border-width: 2px;

        }
        .boxy-border-vertical3
        {
            margin: 0 2px;
        }
        .boxy-border-vertical4
        {
            height: 2px;
            margin: 0 1px;
        }
        .boxy-border-vertical5
        {
            height: 5px;
        }
        .boxy-border
        {
            display:block;
            background-color: black;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        .boxy-border-horizontal
        {
            width: 10px;
            border: none;
        }
        .box
        {
            width: 256px;
            height: 190px;
            text-indent: 2em;
            font-size: 2em;
            font-family: '������κ' , '�����п�' , '΢���ź�';
            color: #a6813c;
            background-color: black;
            opacity: 0.5;
            filter: alpha(opacity=50);
            position: relative;
            z-index: 2;
            -moz-border-radius: 8px; /* Firefox */
            -webkit-border-radius: 8px; /* Safari �� Chrome */
            border-radius: 8px; /* Opera 10.5+, �Լ�ʹ����IE-CSS3��IE����� */
            
            behavior: url(ie-css3.htc); /* ֪ͨIE�������ýű�������'box'�� */
            
            padding:20px;
        }
    </style>
</head>
<body>
    <div style=" width:600px; border:solid 1px blue; background-color:Silver; z-index:2; color:Blue;">
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
      <p>/* ֪ͨIE�������ýű�������'box'�� */</p>
    </div>
    <div style=" position:absolute; left:20px; top :20px;">
    <table cellpadding="0" cellspacing="0" >
        <tr>
            <td style=" padding:0;">
                <span class="boxy-border-vertical1 boxy-border"></span>
                <span class="boxy-border-vertical2 boxy-border"></span>
                <span class="boxy-border-vertical3 boxy-border"></span>
                <span class="boxy-border-vertical4 boxy-border"></span>
                <span class="boxy-border-vertical5 boxy-border"></span>
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="boxy-border-horizontal boxy-border">
                        </td>
                        <td style="height: 300px;">
                            <font style="font-size: 26px; color: red; margin: 0px 10px;">�����cssԲ�Ǿ���</font>
                        </td>
                        <td class="boxy-border-horizontal boxy-border">
                        </td>
                    </tr>
                </table>
                <span class="boxy-border-vertical5 boxy-border"></span>
                <span class="boxy-border-vertical4 boxy-border"></span>
                <span class="boxy-border-vertical3 boxy-border"></span>
                <span class="boxy-border-vertical2 boxy-border"></span>
                <span class="boxy-border-vertical1 boxy-border"></span>
            </td>
        </tr>
    </table>
    <div style="height:100px;"></div>
    <table class="box">
        <tr><td>
            <div style="z-index:4; margin:10px;background-color: #fff;opacity:1;filter: alpha(opacity=100); position:relative;">����̳и����͸��Ч���Ҳ��ܸ��͸���</div>
        </td></tr>
    </table>
    </div>
    
</body>
</html>
